<template>
  <div>
    <Headline
      :headline1="$t('m.FaceRecognition') + '  /  '"
      :headline2="$t('m.PermissionGroupSetting')"
    />
    <a-card style="width: 100%">
      <a-input-search
        style="width: 200px; margin-right: 15px"
        :placeholder="$t('m.PleaseEnterYourSearchTerms')"
        enter-button
        v-model="forminitial.key"
        @search="onSearch"
      />
      <a-alert
      v-if="data.length==0"
      style="margin-top: 15px;"
      :message="$t('m.Thefaceofadevice')"
      banner
      closable
    />
      <a-table
        class="tables"
        :columns="columns"
        :rowKey="(record) => record.id"
        :pagination="false"
        :data-source="data"
        bordered
      >
        <div slot="index" slot-scope="text, tag, i">
          {{ i + 1 }}
        </div>
        <div slot="tag" slot-scope="text, tag, i">
          <a-button
            style="margin-left: 15px"
            type="primary"
            @click="show(text, tag, i)"
            >{{ $t("m.Examine") }}</a-button
          >
          <a-button
            style="margin-left: 15px"
            type="primary"
            @click="addauth(text, tag, i)"
            :disabled="!isTrue('face:groupcfg:add')"
            >{{ $t("m.AddPermissionGroup") }}</a-button
          >
        </div>
      </a-table>
      <a-pagination
        class="pages"
        show-size-changer
        :defaultPageSize="5"
        :default-current="1"
        :total="hometotal"
        @change="sethomePages"
        :pageSizeOptions="['5', '10', '30', '40']"
        @showSizeChange="sethomeShowpowerChange"
      />
    </a-card>
    <a-modal
      :title="$t('m.PermissionGroupPersonInfo')"
      width="1000px"
      :visible="visible"
      @cancel="anewShow"
      :footer="null"
    >
      <div class="tabile">
        <a-select
          v-model="device.downStatus"
          style="width: 140px"
          @change="downStatusChange"
        >
          <a-select-option value=""> 全部 </a-select-option>
          <a-select-option value="0"> 待下载 </a-select-option>
          <a-select-option value="1"> 已下载 </a-select-option>
          <a-select-option value="2"> 下载失败 </a-select-option>
          <a-select-option value="3"> 待删除 </a-select-option>
          <a-select-option value="4"> 删除失败 </a-select-option>
          <a-select-option value="5"> 待重下 </a-select-option>
          <a-select-option value="6"> 重下失败 </a-select-option>
        </a-select>
        <a-input-search
          style="width: 200px; margin-left: 15px"
          placeholder="请输入权限组名称关键词"
          size="default"
          @search="deviceSearch"
          v-model="device.key"
        />
        <a-button
          type="primary"
          icon="vertical-align-bottom"
          style="margin-left: 15px"
          @click="anews"
          v-if="isTrue('face:groupcfg:redown')"
        >
          {{ $t("m.ReDownload") }}
        </a-button>
        <a-button
          style="margin-left: 15px"
          type="primary"
          icon="delete"
          v-if="isTrue('face:groupcfg:del')"
          @click="delAuth"
        >
          {{ $t("m.DelPermissionGroup") }}
        </a-button>
      </div>

      <a-table
        :columns="columnsB"
        class="tables"
        :rowKey="(record) => record.id"
        :data-source="dataB"
        :pagination="false"
        bordered
        :row-selection="{
          onChange: locoChange,
          type: 'radio',
          selectedRowKeys: locosclete,
        }"
      />
      <a-pagination
        class="pages"
        show-size-changer
        :defaultPageSize="5"
        :default-current="1"
        :total="anewtotal"
        @change="anewPages"
        :pageSizeOptions="['5', '10', '30', '40']"
        @showSizeChange="anewShowpowerChange"
      />
    </a-modal>
    <a-modal
      :title="$t('m.AddPermissionGroup')"
      width="1000px"
    :cancelText="$t('m.Cancel')"
      :okText="$t('m.Ok')"
      :visible="visibles"
      @cancel="quShow"
      @ok="authOk"
    >
      <a-table
        class="tables"
        :columns="columnsel"
        :pagination="false"
        :rowKey="(record) => record.id"
        :data-source="authvessel"
        bordered
        :row-selection="{
          onChange: onSelectChange,
          type: 'radio',
          selectedRowKeys: authsclete,
        }"
      >
        <div slot="index" slot-scope="text, tag, i">
          {{ i + 1 }}
        </div>
      </a-table>
      <a-pagination
        class="pages"
        show-size-changer
        :defaultPageSize="5"
        :default-current="1"
        :total="total"
        @change="settingPages"
        :pageSizeOptions="['5', '10', '30', '40']"
        @showSizeChange="settingShowpowerChange"
      />
    </a-modal>
    <Delete
      ref="settingdelete"
      :dalete="dalete"
      @confirm="settingdelete"
    ></Delete>
    <Delete ref="anew" :dalete="huadalete" @confirm="anewalter"></Delete>
  </div>
</template>

<script>
import Headline from "@/components/Headline";
import Delete from "@/components/Delete";
import {
  getDeviceList,
  getAuthGroupCfg,
  getAuthGroupList,
  getAddGroupCfg,
  delDevAuthGroup,
  getCfgRedown,
} from "@/api/faceRecognition";
import { Setperms } from "@/assets/js/setperms";

export default {
  name: "Setting",
  components: { Headline, Delete },
  data() {
    return {
      data: [],
      dalete: {
        titles: this.$t("m.DeleteThePrompt"),
        type: "exclamation-point",
        text: this.$t("m.AreYouSureToDeleteThisData"),
      },
      huadalete: {
        titles: this.$t("m.DownloadPrompt"),
        type: "exclamation-point",
        text: this.$t("m.AreYouSureToReDownload"),
      },
      columns: [
        {
          title: this.$t("m.SerialNumber"),
          scopedSlots: { customRender: "index" },
        },
        { title: this.$t("m.EquipmentNumber"), dataIndex: "machineid" },
        { title: this.$t("m.EquipmentName"), dataIndex: "devname" },
        {
          title: this.$t("m.Operation"),
          dataIndex: "f",
          scopedSlots: { customRender: "tag" },
        },
      ],
      forminitial: {
        start: 0,
        limit: 10,
        key: "",
        devClass: 9,
        page: 1,
      },
      columnsB: [
        { title: this.$t("m.DownloadStatus"), dataIndex: "downstatusname" },
        { title: this.$t("m.PermissionGroupName"), dataIndex: "groupname" },
        { title: this.$t("m.EquipmentName"), dataIndex: "devname" },
        { title: this.$t("m.DownloadNumber"), dataIndex: "downnum" },
        { title: this.$t("m.DownloadTime"), dataIndex: "createdate" },
        { title: this.$t("m.DownloadInfo"), dataIndex: "z" },
      ],
      device: {
        devIds: "",
        downStatus: "",
        key: "",
        start: 0,
        limit: 5,
        page: 1,
      },
      dataB: [],
      columnsel: [
        {
          title: this.$t("m.PermissionGroupNumber"),
          scopedSlots: { customRender: "index" },
        },
        { title: this.$t("m.PermissionGroupName"), dataIndex: "groupName" },
        { title: this.$t("m.WeekPlanName"), dataIndex: "planName" },
      ],
      addauthsort: {
        devIds: "",
        groupId: "",
      },
      authsclete: [],
      authvessel: [],
      visible: false,
      visibles: false,
      total: 0,
      hometotal: 0,
      anewtotal: 0,
      //权限组表单
      authform: {
        page: 1,
        start: 0,
        limit: 20,
      },
      locosclete: [],
      delauth: "",
    };
  },
  created() {
    this.getDevList();
    this.parms = Setperms(
      this.$route.fullPath,
      JSON.parse(sessionStorage.getItem("menu"))
    );
    console.log(this.parms);
  },
  methods: {
    isTrue(str) {
      return this.parms.indexOf(str) !== -1;
    },
    getDevList() {
      getDeviceList({ params: this.forminitial })
        .then((res) => {
          this.data = res.data.data;
          console.log(res);
          this.hometotal = res.data.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //查看点击
    show(text, tag, i) {
      console.log(tag);
      this.device.devIds = tag.id;
      this._getAuthGroupCfg();
      this.visible = true;
    },
    _getAuthGroupList() {
      getAuthGroupList({ params: this.authform })
        .then((res) => {
          this.authvessel = res.data.data;
          console.log(res);
          this.total = res.data.total;
          this.visibles = true;
        })
        .catch((err) => {
          this.visibles = true;
        });
    },
    //请求设备信息数据
    _getAuthGroupCfg() {
      getAuthGroupCfg({ params: this.device }).then((res) => {
        this.dataB = res.data.data;
        this.anewtotal = res.data.total;
      });
    },
    //搜索点击
    onSearch() {
      this.getDevList();
    },
    //弹窗取消
    hideShow() {
      this.visible = false;
    },
    //select点击触发
    handleChange() {},
    //添加权限组按钮点击
    addauth(text, tag, i) {
      console.log(tag);
      this.addauthsort.devIds = tag.id;
      this._getAuthGroupList();
    },
    //添加权限组弹窗取消
    quShow() {
      this.visibles = false;
      this.authsclete = [];
      this.addauthsort.groupId = "";
      this.addauthsort.devIds = "";
    },
    //选中权限组
    onSelectChange(text, tag) {
      console.log(text, tag[0].groupId);
      this.authsclete = text;
      this.addauthsort.groupId = tag[0].groupId;
    },
    //弹窗确定
    authOk() {
      getAddGroupCfg(this.addauthsort)
        .then((res) => {
          const msg = res.data.msg;
          if (res.data.success) {
            this.$message.success(msg);
          } else {
            this.$message.error(msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
      this.visibles = false;
      this.authsclete = [];
      this.addauthsort.groupId = "";
      this.addauthsort.devIds = "";
    },
    //弹窗分页
    settingPages(page, limit) {
      console.log(page, limit);
      this.authform.page = page;
      this.authform.limit = limit;
      this.authform.start = (page - 1) * limit;
      this._getAuthGroupList();
    },
    settingShowpowerChange(page, pageSize) {
      this.authform.page = page;
      this.authform.limit = pageSize;
      this.authform.start = (page - 1) * pageSize;
      this._getAuthGroupList();
    },
    //主页面分页
    sethomePages(page, limit) {
      console.log(page, limit);
      this.forminitial.page = page;
      this.forminitial.limit = limit;
      this.forminitial.start = (page - 1) * limit;
      this.getDevList();
    },
    sethomeShowpowerChange(page, pageSize) {
      this.forminitial.page = page;
      this.forminitial.limit = pageSize;
      this.forminitial.start = (page - 1) * pageSize;
      this.getDevList();
    },
    //查看弹窗方法
    locoChange(text, tag) {
      this.locosclete = text;
      this.delauth = tag[0].cfgid;
    },
    //取消弹窗
    anewShow() {
      console.log(1);
      this.visible = false;
      this.locosclete = [];
    },
    //删除权限点击
    delAuth() {
      if (this.locosclete.length == 0) {
        this.$message.error("请选择权限组");
      } else {
        this.$refs.settingdelete.visible = true;
      }
    },
    //删除
    settingdelete() {
      delDevAuthGroup({ cfgId: this.delauth }).then((res) => {
        if (res.data.success == true) {
          this.getGroupList()
          this.$message.success("删除成功");
        }
        if (res.data.success == false) {
          this.$message.warning(res.data.msg);
        }
        console.log(res);
        this._getAuthGroupCfg();
      });
      this.$refs.settingdelete.visible = false;
      this.locosclete = [];
    },
    //重新下载点击
    anews() {
      if (this.locosclete.length == 0) {
        this.$message.error("请选择权限组");
      } else {
        this.$refs.anew.visible = true;
      }
    },
    //重新下载弹窗确定
    anewalter() {
      getCfgRedown({ cfgIds: this.delauth })
        .then((res) => {
          const msg = res.data.msg;
          if (res.data.success) {
            this.$message.success(msg);
            this._getAuthGroupCfg();
          } else {
            this.$message.error(msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
      this.$refs.anew.visible = false;
      this.locosclete = [];
    },
    //切换下载状态方法
    downStatusChange() {
      this._getAuthGroupCfg();
    },
    //搜索
    deviceSearch() {
      this._getAuthGroupCfg();
    },
    //分页
    anewPages(page, limit) {
      console.log(page, limit);
      this.device.page = page;
      this.device.limit = limit;
      this.device.start = (page - 1) * limit;
      this._getAuthGroupCfg();
    },
    anewShowpowerChange(page, pageSize) {
      this.device.page = page;
      this.device.limit = pageSize;
      this.device.start = (page - 1) * pageSize;
      this._getAuthGroupCfg();
    },
  },
};
</script>

<style lang="scss" scoped>
.pages {
  margin-top: 15px;
}
.tables {
  margin-top: 20px;
}
.tabile {
  display: flex;
}
</style>
